import React, { useState, useEffect, useRef } from 'react';
import { PullToRefresh } from 'antd-mobile';
import ReactDOM from 'react-dom';

import './index.less';

export default function Paging({ render, handlePageChange, done }) {
  const [refreshing, setRefresh] = useState(false);
  const [down, setDown] = useState(true);
  const puLLRef = useRef();
  const [height, setHeight] = useState(document.documentElement.clientHeight);
  function refreshFn() {
    if (done) {
      return;
    }
    handlePageChange();
    setRefresh(true);
    setTimeout(() => {
      setRefresh(false);
    }, 1000);
  }
  useEffect(() => {
    setHeight(height - ReactDOM.findDOMNode(puLLRef.current).offsetTop);
  }, []);
  return (
    <div className="Paging">
      <PullToRefresh
        damping={60}
        ref={puLLRef}
        style={{
          height: height,
          overflow: 'auto',
        }}
        indicator={{ deactivate: '上拉可以刷新' }}
        direction={'up'}
        refreshing={refreshing}
        onRefresh={refreshFn}
      >
        {render ? render() : null}
        <div className="pageing-text" onClick={refreshFn}>
          {' '}
          {done
            ? '没有更多数据了'
            : refreshing
            ? '正在加载中...'
            : '点击加载更多'}{' '}
        </div>
      </PullToRefresh>
    </div>
  );
}
